<!--
This tests that location changes are sent when an element animates
using CSS transitions. The test animates the size of a button when
focused, then adds the magic text "Done" to the document when
the transition finishes. The WAIT-FOR directive below instructs
the test framework to keep waiting for accessibility events and
not diff the dump against the expectations until the text "Done"
appears in the dump.

@MAC-ALLOW:AXSize={h: 300, w: 600}
@WIN-ALLOW:size=(400, 200)
@WIN-ALLOW:size=(600, 300)
@WAIT-FOR:Done
-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
  width: 800px;
  height: 600px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
#growbutton {
  width: 400px;
  height: 200px;
  margin: 0;
  padding: 0;
}
#growbutton:focus {
  width: 600px;
  height: 300px;
  transition: all 0.1s ease-in-out;
}
</style>
</head>
<body>

<button id="growbutton">GrowButton</button>

<script>
  var growButton = document.getElementById('growbutton');
  var done = false;
  growButton.addEventListener('webkitTransitionEnd', function() {
    if (!done) {
      document.body.appendChild(document.createTextNode('Done'));
      done = true;
    }
  }, false);
  growButton.focus();  
</script>

</body>
</html>
